<template>
    <div class="map-grid-wrap" style="height: 100%; position: relative;">
        <div class="map-container" id="map_grid_map"></div>
        <el-button icon="el-icon-refresh-right" class="reset" @click="fReset"></el-button>
    </div>
</template>

<script>
    import axios from 'axios';
    import L from 'leaflet';
    // import 'leaflet.chinatmsproviders';
    const TilelayerColorizr = require("./common/TilelayerColorizr");

    export default {
        name: "MapGrid",
        data() {
            this.map = null;
            this.lyGroup = new L.featureGroup()
            const corner1 = L.latLng(39.215190855628585,117.68071098043886)
            const corner2 = L.latLng(38.783625920545184,116.53301248390588)
            this.maxBounds = L.latLngBounds(corner1,corner2);
            this.legendData = [
                {
                    key: 0,
                    color: "rgba(0,0,0,0)"
                },
                {
                    key: 10,
                    color: "rgba(198,252,180,1)"
                },
                {
                    key: 20,
                    color: "rgba(162,250,131,1)"
                },
                {
                    key: 30,
                    color: "rgba(111,252,62,1)"
                },
                {
                    key: 40,
                    color: "rgba(59,222,5,1)"
                },
                {
                    key: 50,
                    color: "rgba(90,185,252,1)"
                },
                {
                    key: 60,
                    color: "rgba(26,134,209,1)"
                },
                {
                    key: 70,
                    color: "rgba(250,211,13,1)"
                },
                {
                    key: 80,
                    color: "rgba(255,155,0,1)"
                },
                {
                    key: 90,
                    color: "rgba(255,90,0,1)"
                },
                {
                    key: 100,
                    color: "rgba(216,3,3,1)"
                }
            ]

            return {
                
            }
        },
        mounted () {
            this.initMap()
        },
        methods: {
            initMap() {
                this.map = L.map("map_grid_map", {
                    // crs: L.CRS.EPSG4326, //默认3857
                    minZoom: 9, //最小缩放值
                    maxZoom: 16, //最大缩放值
                    center: L.latLng(31.086444, 121.734942),
                    zoom: 9,
                    maxBounds: this.maxBounds,
                    maxBoundsViscosity: 0,
                    zoomControl: true, //是否启用地图缩放控件
                    attributionControl: false, //是否启用地图属性控件
                    preferCanvas: true,
                    zoomSnap: 0.4
                });
                L.control.scale().addTo(this.map);

                // lang=zh_cn&size=1&scale=1&
                // L.tileLayer.colorizr('http://webrd02.is.autonavi.com/appmaptile?size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
                //     colorize: function(pixel) {
                //         // console.log(pixel)
                //         // pixel.r += 13;
                //         // pixel.g += 17;
                //         // pixel.b += 90;
                //         // if (pixel.r === )
                //         // pixel.r += -100;
                //         // pixel.g += -200;
                //         // pixel.b += -200;

                //         // if (pixel.r === 252 && pixel.g === 249 && pixel.b === 242) {
                //         //     pixel.r = 26;
                //         //     pixel.g = 46;
                //         //     pixel.b = 95;
                //         // } else {

                //         // }
                //         const { r, g, b } = pixel
                //         pixel.r = g;
                //         pixel.g = r;
                //         pixel.b = b;
                        
                //         return pixel;
                //     }
                // }).addTo(this.map)


                const satelliteTileLayer = L.layerGroup([
                    /** 7矢量 8矢量明亮  */
                    // lang=zh_cn&size=1&scale=1&
                    // L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
                    //     subdomains: ['1', '2', '3', '4']
                    // }),

                    /** 6高德影像 7矢量字体放大版 8矢量透明 9矢量字体放大版明亮一些  */
                    // L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
                    //     subdomains: ['1', '2', '3', '4']
                    // }),

                    L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}')
                ]);
                satelliteTileLayer.addTo(this.map)

                this.lyGroup.addTo(this.map);

                this.addBoundary();

                this.addGrid();

                this.map.on("click", (e) => {
                    console.log(this.map.getBounds());
                })
            },
            addBoundary() {
                axios.get("/data/xiqing-county.geojson").then(res => {
                    const geo = new L.geoJson(res.data, {
                        style: () => {
                            return {
                                color: 'rgba(23,203,252,1)',
                                weight: 3,
                                fill: false
                            }
                        }
                    })
                    geo.addTo(this.lyGroup);
                    this.map.flyToBounds(geo.getBounds(), {
                        animate: true,
                        duration: 0.8,
                    });
                })
            },
            addGrid() {
                axios.get("/data/grid4326.geojson").then(res => {
                    const geo = new L.geoJson(res.data, {
                        style: (feature) => {
                            const value = feature.properties.value;
                            return {
                                color: "rgba(255,255,255,1)",
                                opacity: 0.9,
                                weight: 0.1,
                                fillColor: this.geGridColor(value),
                                fillOpacity: 0.55
                            }
                        },
                        onEachFeature: (feature, layer) => {
                            layer.bindTooltip(feature.properties.value+'');
                        }
                    })
                    geo.addTo(this.lyGroup);
                })
            },
            geGridColor(value) {
                let color = "";
                if (value === 0) {
                    color = "rgba(0,0,0,0)"
                } else {
                    for (let i = 0; i < this.legendData.length; i++) {
                        if (value > this.legendData[i].key && value <= this.legendData[i+1].key) {
                            color = this.legendData[i+1].color
                            break
                        }
                    }
                }
                return color;
            },
            fReset() {
                this.map.flyToBounds(this.maxBounds, {
                    animate: true,
                    duration: 0.8,
                })
            }
        },
    }
</script>

<style lang="scss" scope>
.map-grid-wrap {
    .map-container {
        height: 100%;
    }
    .el-button.reset {
        position: absolute;
        top: 85px;
        left: 12px;
        z-index: 9999;
        padding: 8px;
    }
}

// .leaflet-layer .leaflet-zoom-animated img {
//     -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
//     -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
//     -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
//     filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
// } 
</style>